  <ion-header style="background: white;">
    <ion-toolbar class="scanner">
      <ion-buttons slot="start">
        <ion-button (click)="closeModal()">
          <ion-icon slot="icon-only" name="close"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-title>扫描中</ion-title>
    </ion-toolbar>
  </ion-header>
  
  <ion-content [class.scanner]="scannerClass" >
    <div class="qr-scanner-area">
      <p class="lines"></p>
    </div>
  
    <ion-grid fixed class="scanner-button-bottom" style=" padding-left: 20%;">
      <ion-row>
        <ion-col size="6" class="ion-flex ion-justify-content-center">
          <ion-button fill="clear" class="qr-scanner-button" (click)="toogleLight()">
            <ion-icon slot="icon-only" [name]="lightIcon"></ion-icon>
          </ion-button>
        </ion-col>
        <ion-col size="6" class="ion-flex photoRevase ion-justify-content-center">
           <ion-button fill="clear" class="qr-scanner-button" (click)="toggleCamera()">
            <ion-icon name="repeat-outline" slot="icon-only"></ion-icon>
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>